<body>
<div class="container">

    <button id="changePasswordBtn" class="btn-change-password">
        <i class="fas fa-key"></i> 修改密码
    </button>

</div>

<!-- 修改密码模态框 -->
<div id="passwordModal" class="modal">
    <div class="modal-content">
        <div class="modal-body">
            <div class="input-group">
                <label for="currentPassword"><i class="fas fa-lock"></i> 当前密码</label>
                <input type="password" id="currentPassword" placeholder="请输入当前密码">
                <i class="fas fa-eye" id="toggleCurrentPassword"></i>
            </div>

            <div class="input-group">
                <label for="newPassword"><i class="fas fa-key"></i> 新密码</label>
                <input type="password" id="newPassword" placeholder="请输入新密码">
                <i class="fas fa-eye" id="toggleNewPassword"></i>
                <div class="password-strength">
                    <div class="strength-meter" id="passwordStrength"></div>
                </div>
            </div>

            <div class="input-group">
                <label for="confirmPassword"><i class="fas fa-check-circle"></i> 确认新密码</label>
                <input type="password" id="confirmPassword" placeholder="请再次输入新密码">
                <i class="fas fa-eye" id="toggleConfirmPassword"></i>
            </div>


            <div class="success-message" id="successMessage">
                <i class="fas fa-check-circle"></i>
                <h3>密码修改成功！</h3>
                <p>您已成功更新账户密码，请使用新密码登录</p>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn btn-cancel" id="cancelBtn">取消</button>
            <button class="btn btn-submit" id="submitBtn" disabled>确认修改</button>
        </div>
    </div>
</div>

<script>
    // 获取DOM元素
    const changePasswordBtn = document.getElementById('changePasswordBtn');
    const passwordModal = document.getElementById('passwordModal');
    const closeModal = document.getElementById('closeModal');
    const cancelBtn = document.getElementById('cancelBtn');
    const submitBtn = document.getElementById('submitBtn');
    const currentPassword = document.getElementById('currentPassword');
    const newPassword = document.getElementById('newPassword');
    const confirmPassword = document.getElementById('confirmPassword');
    const successMessage = document.getElementById('successMessage');

    // 切换密码可见性
    document.getElementById('toggleCurrentPassword').addEventListener('click', function() {
        togglePasswordVisibility(currentPassword, this);
    });

    document.getElementById('toggleNewPassword').addEventListener('click', function() {
        togglePasswordVisibility(newPassword, this);
    });

    document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
        togglePasswordVisibility(confirmPassword, this);
    });

    function togglePasswordVisibility(input, icon) {
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    // 打开修改密码模态框
    changePasswordBtn.addEventListener('click', function() {
        passwordModal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        // 重置表单
        resetForm();
    });

    // 关闭模态框
    function closePasswordModal() {
        passwordModal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    closeModal.addEventListener('click', closePasswordModal);
    cancelBtn.addEventListener('click', closePasswordModal);

    // 点击模态框外部关闭
    window.addEventListener('click', function(event) {
        if (event.target === passwordModal) {
            closePasswordModal();
        }
    });

    // 密码强度检测
    newPassword.addEventListener('input', function() {
        checkPasswordStrength(this.value);
        validateForm();
    });

    confirmPassword.addEventListener('input', validateForm);
    currentPassword.addEventListener('input', validateForm);

    function checkPasswordStrength(password) {
        const strengthMeter = document.getElementById('passwordStrength');
        let strength = 0;

        // 检查密码长度
        if (password.length >= 8) {
            strength += 25;
            document.getElementById('lengthCheck').style.color = '#2ecc71';
        } else {
            document.getElementById('lengthCheck').style.color = '#e74c3c';
        }

        // 检查是否包含数字
        if (/\d/.test(password)) {
            strength += 25;
            document.getElementById('numberCheck').style.color = '#2ecc71';
        } else {
            document.getElementById('numberCheck').style.color = '#e74c3c';
        }

        // 检查是否包含大写字母
        if (/[A-Z]/.test(password)) {
            strength += 25;
            document.getElementById('upperCheck').style.color = '#2ecc71';
        } else {
            document.getElementById('upperCheck').style.color = '#e74c3c';
        }

        // 检查是否包含特殊字符
        if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
            strength += 25;
            document.getElementById('specialCheck').style.color = '#2ecc71';
        } else {
            document.getElementById('specialCheck').style.color = '#e74c3c';
        }

        // 更新强度条
        strengthMeter.style.width = strength + '%';

        // 设置颜色
        if (strength < 50) {
            strengthMeter.style.backgroundColor = '#e74c3c';
        } else if (strength < 75) {
            strengthMeter.style.backgroundColor = '#f39c12';
        } else {
            strengthMeter.style.backgroundColor = '#2ecc71';
        }
    }

    // 表单验证
    function validateForm() {
        const isCurrentPasswordValid = currentPassword.value.length >= 6;
        const isNewPasswordValid = newPassword.value.length >= 8;
        const isConfirmPasswordValid = confirmPassword.value === newPassword.value && newPassword.value !== '';

        submitBtn.disabled = !(isCurrentPasswordValid && isNewPasswordValid && isConfirmPasswordValid);
    }

    // 重置表单
    function resetForm() {
        currentPassword.value = '';
        newPassword.value = '';
        confirmPassword.value = '';
        document.getElementById('passwordStrength').style.width = '0';
        submitBtn.disabled = true;
        successMessage.style.display = 'none';

        // 重置检查标记
        const checks = document.querySelectorAll('.password-rules li i');
        checks.forEach(check => {
            check.style.color = '#e74c3c';
    });
    }

    // 提交表单
    submitBtn.addEventListener('click', function() {
        // 模拟提交过程
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';

        setTimeout(function() {
            // 显示成功消息
            successMessage.style.display = 'block';
            submitBtn.style.display = 'none';
            cancelBtn.textContent = '关闭';

            // 重置按钮状态
            setTimeout(function() {
                submitBtn.innerHTML = '确认修改';
                submitBtn.style.display = 'block';
                cancelBtn.textContent = '取消';
                closePasswordModal();
            }, 3000);
        }, 2000);
    });
</script>
</body>